<template>
        <view class="userLayout">
                <view class="userInfo">
                        <view class="avatar">
                                <image src="/static/avatar.jpg" mode="aspectFill"></image>
                        </view>
                        <button type="primary" class="loginBtn">登录</button>
                        <view class="username">魔法少女</view>
                </view>

                <view class="section">
                        <view class="list">
                                <navigator url="">
                                        <view class="row">
                                                <view class="left">
                                                        <uni-icons type="download-filled"></uni-icons>
                                                        <view class="text">我的下载</view>
                                                </view>
                                                <view class="right">
                                                        <view class="text">10</view>
                                                        <uni-icons type="right"></uni-icons>
                                                </view>
                                        </view>
                                </navigator>
                                <navigator url="">
                                        <view class="row">
                                                <view class="left">
                                                        <uni-icons type="chatbubble-filled"></uni-icons>
                                                        <view class="text">我的评分</view>
                                                </view>
                                                <view class="right">
                                                        <view class="text">5</view>
                                                        <uni-icons type="right"></uni-icons>
                                                </view>
                                        </view>
                                </navigator>
                                <navigator url="">
                                        <view class="row">
                                                <view class="left">
                                                        <uni-icons type="star-filled"></uni-icons>
                                                        <view class="text">我的收藏</view>
                                                </view>
                                                <view class="right">
                                                        <view class="text">1</view>
                                                        <uni-icons type="right"></uni-icons>
                                                </view>
                                        </view>
                                </navigator>
                        </view>
                </view>

                <view class="section">
                        <view class="list">
                                <navigator url="">
                                        <view class="row">
                                                <view class="left">
                                                        <uni-icons type="notification-filled"></uni-icons>
                                                        <view class="text">订阅更新</view>
                                                </view>
                                                <view class="right">
                                                        <uni-icons type="right"></uni-icons>
                                                </view>
                                        </view>
                                </navigator>
                                <navigator url="">
                                        <view class="row">
                                                <view class="left">
                                                        <uni-icons type="flag-filled"></uni-icons>
                                                        <view class="text">常见问题</view>
                                                </view>
                                                <view class="right">
                                                        <uni-icons type="right"></uni-icons>
                                                </view>
                                        </view>
                                </navigator>
                        </view>
                </view>
        </view>
</template>

<style lang="scss">
        .userLayout {

                // 用户信息
                .userInfo {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        margin: 50rpx 0;

                        // 头像
                        .avatar {
                                width: 200rpx;
                                height: 200rpx;
                                border-radius: 50%;
                                overflow: hidden;

                                image {
                                        width: 100%;
                                        height: 100%;
                                }
                        }

                        // 登录按钮
                        .loginBtn {
                                margin-top: 10rpx;
                                width: 140rpx;
                                height: 60rpx;
                                line-height: 60rpx;
                                border-radius: 30rpx;
                                font-size: 30rpx;
                                font-weight: 600;
                        }

                        // 用户名
                        .username {
                                margin-top: 10rpx;
                                font-size: 35rpx;
                        }
                }

                // 导航栏
                .section {
                        margin: 50rpx auto;
                        width: 690rpx;
                        border: 1px solid #eeeeee;
                        box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.2);
                        border-radius: 10rpx;
                        overflow: hidden;

                        // 导航栏列表
                        .list {

                                // 导航栏列表每一项
                                navigator {
                                        border-bottom: 1px solid #eeeeee;

                                        // 导航栏列表最后一项
                                        &:last-child {
                                                border-bottom: 0;
                                        }

                                        // 导航栏列表每一项里边的样式
                                        .row {
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                                padding: 0 30rpx;
                                                height: 100rpx;
                                                background: white;

                                                // 左侧
                                                .left {
                                                        display: flex;
                                                        align-items: center;

                                                        .text {
                                                                margin-left: 20rpx;
                                                        }
                                                }

                                                // 右侧
                                                .right {
                                                        display: flex;
                                                        align-items: center;

                                                        .text {
                                                                font-size: 28rpx;
                                                                color: #666666;
                                                                margin-right: 10rpx;
                                                        }
                                                }
                                        }
                                }
                        }
                }
        }
</style>

<script setup>

</script>